<template>
  <div class="polHead">
    <div class="polNameHead">
      鼎诚人寿重疾升级版
      <span @click="showPolSelectBody">修改</span>
    </div>
    <div class="premiumContent" v-if="calculateData.sum >= 0">
      <p>首年保费：{{calculateData.sum.toFixed(2)}}元</p>
      <p>半年交保费：{{calculateData.halfYearSum.toFixed(2)}}元</p>
      <p>季度交保费：{{calculateData.quarterSum.toFixed(2)}}元</p>
      <p>月交保费：{{calculateData.monthSum.toFixed(2)}}元</p>
    </div>
    <div class="polTableContent" v-if="calculateData.sum >= 0">
      <table class="polTable">
        <thead>
        <tr>
          <th>险种</th>
          <th width="85px">保额(元)/份数</th>
          <th width="60px">保费(元)</th>
          <th>交费期间</th>
        </tr>
        </thead>
        <tbody>
        <tr :key="index" v-for="(item, index) in insuranceTypes">
          <td>{{item.pid !== 'P0007' ? item.pName : getpName()}}</td>
          <td v-if="item.pid !== 'P0010' && item.pid !== 'P0013' && item.pid !== 'P0012' && item.pid !== 'P0014'">{{item.premium}}</td>
          <td v-else-if="item.pid === 'P0013' || item.pid === 'P0014'">{{planObj[item.premium]}}</td>
          <td v-else-if="item.pid === 'P0010'">
            <p v-for="(item2, index2) in item.transportListData" :key="index2">
              {{`${item2.name}`}}<br>{{`${item2.premium}`}}
            </p>
          </td>
          <td v-else>{{item.premium + '份'}}</td>
          <td>{{item.insuredAmount.toFixed(2)}}</td>
          <td>{{paymentPeriodObj[item.paymentPeriod]}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <mt-popup v-model="polSelectIsHide" :style="{width: '100%', height: '70%', top: '30%', transform: 'translate3d(-50%, 0, 0)'}" pop-transition="popup-fade">
      <pol-select v-on:setHide="setPolSelectHide"
                  v-on:getCheckStatus="getCheckStatus" :selectPolData="selectPolData"
                  v-on:calculate="calculate" v-on:changePaymentPeriod="changePaymentPeriod"
                  :changePol="changePol"
      ></pol-select>
    </mt-popup>
  </div>
</template>

<script>
import PolSelect from './polSelect'
export default {
  name: 'polHead',
  props: ['selectPolData', 'calculateData', 'changePol'],
  components: {PolSelect},
  data () {
    return {
      polSelectIsHide: false,
      paymentPeriodObj: {
        'pf': '5年交',
        'pt': '10年交',
        'pfif': '15年交',
        'pytw': '20年交',
        'pOne': '1年交',
        'pw': '趸交',
        'pfo': '4年交',
        'pn': '9年交',
        'pfot': '14年交',
        'pnt': '19年交',
        'ptnt': '29年交',
        'ptt': '30年交'
      },
      planObj: {
        90400: '计划一',
        177200: '计划二',
        349000: '计划三'
      },
      insuranceTypes: [],
      transportObj: {
        'car': '汽车',
        'train': '列车',
        'airplane': '民航班机',
        'ship': '轮船'
      },
      expirationObj: {
        'all': '鼎诚鼎康保终身重大疾病保险',
        'age70': '鼎诚鼎康保定期重大疾病保险(A款)',
        'age80': '鼎诚鼎康保定期重大疾病保险(A款)',
        'date30': '鼎诚鼎康保定期重大疾病保险(A款)',
        'date20': '鼎诚鼎康保定期重大疾病保险(A款)',
        'dateB10': '鼎诚鼎康保定期重大疾病保险(B款)',
        'dateB15': '鼎诚鼎康保定期重大疾病保险(B款)',
        'dateB20': '鼎诚鼎康保定期重大疾病保险(B款)',
        'dateB30': '鼎诚鼎康保定期重大疾病保险(B款)'
      },
      popModal: false
    }
  },
  mounted () {
  },
  methods: {
    getInsuranceTypes () {
      this.insuranceTypes = []
      if (this.calculateData.insuranceTypes) {
        for (let item of this.calculateData.insuranceTypes) {
          if (item.pid !== 'P0010') {
            this.insuranceTypes.push(item)
          } else {
            let hasP10 = false
            for (let item2 of this.insuranceTypes) {
              if (item2.pid === 'P0010') {
                hasP10 = true
                item2.insuredAmount += item.insuredAmount
                item2.transportListData.push({
                  name: this.transportObj[item.transport],
                  premium: item.premium
                })
              }
            }
            if (!hasP10) {
              item.transportListData = [{
                name: this.transportObj[item.transport],
                premium: item.premium
              }]
              this.insuranceTypes.push(item)
            }
          }
        }
      }
    },
    getpName () {
      let pName = ''
      if (this.selectPolData && this.calculateData.insuranceTypes) {
        for (let item of this.selectPolData) {
          if (item.pid === 'P0007') {
            for (let item2 of this.calculateData.insuranceTypes) {
              if (item2.pid === 'P0007') {
                pName = this.expirationObj[item.expiration]
                return pName
              }
            }
          }
        }
      }
    },
    showPolSelectBody () {
      this.polSelectIsHide = true
      // this.popModal = true
    },
    setPolSelectHide (data) {
      this.polSelectIsHide = !data
    },
    getCheckStatus (status, index, pid) {
      this.$emit('getCheckStatus', status, index, pid)
    },
    calculate () {
      this.$emit('calculate')
      this.polSelectIsHide = false
    },
    changePaymentPeriod (data) {
      this.$emit('changePaymentPeriod', data)
      this.polSelectIsHide = true
    }
  },
  watch: {
    calculateData () {
      this.getInsuranceTypes()
    }
  }
}
</script>

<style scoped>
  .polNameHead {
    padding: 5px 15px 0 15px;
    height: 20px;
    position: relative;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
  }
  .polNameHead span {
    line-height: 20px;
    position: absolute;
    right: 15px;
    font-weight: bold;
    color: #0d9cff;
  }
  .premiumContent {
    padding: 5px 15px;
    color: #535353;
    font-size: 13px;
  }
  .polTableContent {
    padding: 0 15px;
    margin-top: 10px;
  }
  .polTable {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c2c2c2;
    border-spacing: 0;
  }
  .polTable > thead > tr > th {
    vertical-align: middle;
    border: 1px solid #c2c2c2;
    border-top: 0;
    color: #535353;
    font-size: 14px;
    font-weight: normal;
    line-height: 14px;
    padding: 5px 5px;
  }
  .polTable > thead > tr > th:last-of-type {
    width: 70px;
  }
  .polTable > tbody > tr > td {
    border: 1px solid #c2c2c2;
    text-align: left;
    color: #535353;
    font-size: 14px;
    font-weight: normal;
    line-height: 14px;
    padding: 5px 5px;
  }
  .polTable > tbody > tr > td > p {
    padding-bottom: 5px;
  }
</style>
